<template>
  <el-tag
    v-for="tag in dynamicTags"
    :key="tag"
    class="mx-1"
    effect="plain"
    closable
    :disable-transitions="false"
    @close="handleClose(tag)"
  >
    {{ tag.fileName }}
  </el-tag>
  <el-button class="button-new-tag ml-1" style="margin-left: 10px" size="small" @click="this.$refs.minioUpload.selectFile()">+ 上传</el-button>
  <minio-upload ref="minioUpload" @success="uploadCallback"/>
</template>

<script>
import {ref, watch, toRefs} from 'vue'
import MinioUpload from "@/components/Upload/MinioUpload.vue";

export default {
  components: {
    MinioUpload
  },
  props: {
    list: {
      type: Array, // 参数类型
      default: [], //默认值
      required: true //是否必传
    }
  },
  setup(props, {emit}) {
    const dynamicTags = ref([]);

    let {list} = toRefs(props);
    watch(list, async(val) => {
      dynamicTags.value = [];
      if (val) {
        dynamicTags.value.push(...val);
      }
    });

    const handleClose = (tag) => {
      dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
      emit('success', dynamicTags.value)
    }

    const uploadCallback = (fileInfo) => {
      if (fileInfo.url) {
        dynamicTags.value.push(fileInfo)
        emit('success', dynamicTags.value)
      }
    }

    return {
      dynamicTags,
      handleClose,
      uploadCallback
    }
  }
}
</script>
